import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { Cell, Image, Checkbox, SubmitBar, Tabs, Button } from 'react-vant'
import { async_updateshoplist, } from '../store/Slice'

export default function Store() {

  let obj = useSelector(state => state.crms1)
  let dispatch = useDispatch()
  //console.log(obj);

  //全选
  let isAll = obj.shoplist.length > 0 && obj.shoplist.every(item => {
    return item.tang
  })

  return (
    <div>
      {/* 卡片组件 */}
      <div>
        {
          obj.shoplist.map(item => {
            return <Cell
              center
              key={item.id}
              title={item.title}
              label={item.jianjie}
              icon={<div>
                <div>
                  <Button onClick={() => {
                    let obj = {
                      ...item,
                      tang: !item.tang
                    }
                    dispatch(async_updateshoplist(obj))
                  }}>{item.tang ? '已关注' : '未关注'}</Button>
                </div>
                <div>
                  <Image width={44} height={44} src={item.img} round />
                </div>
              </div>}
              isLink
            />
          })
        }
      </div>
      {/* 底部提交栏 */}
      <div className="demo-submit-bar">
        <SubmitBar
          price="3050"
          buttonText="提交订单"
        >
          <Button onClick={() => {
            obj.shoplist.forEach(item => {
              let obj = {
                ...item,
                tang: !item.tang
              }
              dispatch(async_updateshoplist(obj))
            })
          }}>一键关注</Button>
        </SubmitBar>
      </div>

      <div>
        <Tabs>
          {['关注', '关注1', '关注2', '关注3', '关注4', '关注5', '关注6', '关注7', '关注8',].map(item => (
            <Tabs.TabPane key={item} title={item}>
            </Tabs.TabPane>
          ))}
        </Tabs>
      </div>

    </div>
  )
}
